<template>
	<view>
		<view class="com-container">
			<c-layout>
				<!-- 头部 -->
				<c-navigation-bar slot="head" title="Reviews"></c-navigation-bar>
				<!-- <view class="lists" v-for="item in lists" :key="item.qty"> -->
				<!-- <view class="goodsInfo">
						<goodsOrder :goodsDetail="item"></goodsOrder>
					</view> -->
				<view class="lists" v-for="(item, index) in lists" :key="item.id">
					<view class="goodsInfo">
						<orderCard :orderDetails="item"></orderCard>
					</view>

					<!-- 评价 -->

					<view class="rate-box">
						<view class="rate">
							<!-- <u-rate count="count" current="2" size="41" gutter="16" v-model="starCount"></u-rate> -->
							<view class="" @click="handleGoodRating(item)">
								<view class="">{{$t('product.goodReputation') }}</view>
								<u-icon :name="item.details.upIcon" :color="iconColor" size="40"></u-icon>
							</view>
							<view class="" @click="handleBadRating(item)">
								<u-icon :name="item.details.downIcon" :color="iconColor" size="40"></u-icon>
								<view class="">{{$t('product.negativeComment') }}</view>
							</view>
						</view>
						<view class="content-box">
							<view class="content">
								<view class="pen-box">
									<u-icon name="edit-pen" size="24" color="#D2D2D2"></u-icon>
								</view>

								<textarea v-model="item.details.content" :placeholder="placeholder" name="" id="" cols="30" rows="10"
									maxlength="200"></textarea>
								<!-- <rich-text :nodes="strings" :placeholder="placeholder"></rich-text> -->
							</view>
							<view class="">
								<!-- 	<u-upload
									:index="index"
									ref="upload"
									class="uplod-box"
									del-bg-color="#a6a7a8"
									:custom-btn="true"
									:max-size="5 * 1024 * 1024"
									:max-count="3"
									:action="uploadUrl"
									@on-change="changeList"
									:file-list="fileList"
									@on-remove="uploadRemove"
									@on-success="uploadSuccess"
									:header="{ Authorization: `Bearer ${vuexToken}` }"
									:show-progress="false"
								>
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
										
										<view class="icon-box">
											<u-image border-radius="26rpx" src="@/static/images/user/photo.png" mode="widthFix" width="52rpx" height="52rpx"></u-image>
											<view class="uploadText">
												{{ uploadText }}
											</view>
										</view>
									</view>
								</u-upload> -->
								<view class="" style="display: flex;">
									<u-image style="margin-left: 20rpx" width="200rpx" height="200rpx"
										v-for="(it, key) in item.details.images" :src="$u.file.getMedieUrl(it)" :key="key"></u-image>
								</view>

								<view class="Uploadproduct p-b-6" v-if="item.details.images.length < 3">

									<view class="uploaddiv" @click="uploadImg(index)">
										<u-image style="margin: 0 auto;" border-radius="26rpx" src="@/static/images/user/photo.png"
											mode="widthFix" width="52rpx" height="52rpx"></u-image>
										<view class="uploadText">
											{{ uploadText }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="box-border">
						<view class="">
							<view class="row">
								<view class="rowTitle">
									{{$t('shop.ProductExperience')}}
								</view>
								<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38"
									v-model="item.details.shopScore.productScore" style="margin: 0 10rpx;"></u-rate>
							</view>
							<view class="row">
								<view class="rowTitle">
									{{$t('shop.LogisticsExperience')}}
								</view>
								<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38"
										v-model="item.details.shopScore.logisticsScore" style="margin: 0 10rpx;"></u-rate>
							</view>
							<view class="row">
								<view class="rowTitle">
									{{$t('shop.After-salesExperience')}}
								</view>
								<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38"
										v-model="item.details.shopScore.afterSaleScore" style="margin: 0 10rpx;"></u-rate>
							</view>
							<view class="row">
								<view class="rowTitle">
									{{$t('shop.ConsultingExperience')}}
								</view>
								<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38"
										v-model="item.details.shopScore.consultScore" style="margin: 0 10rpx;"></u-rate>
							</view>


						</view>


					</view>

				</view>

				<view class="release-btn">
					<u-button type="primary" class="custom-style" @click="submit()">{{$t('system.Submit') }}</u-button>
				</view>
				<view>
					<u-toast ref="uToast" />
				</view>
			</c-layout>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parmasData: [],

				rate: null,
				iconColor: '#2934d0',
				upIcon: 'thumb-up',
				downIcon: 'thumb-down',
				lists: [{
						name: 'Black Heart',
						image: '',
						by: 'Black Heart Institution',
						intro: 'Realize Syirian children',
						qty: '1'
					},
					{
						name: 'Black Heart',
						image: '',
						by: 'Black Heart Institution',
						intro: 'Realize Syirian children',
						qty: '2'
					},
					{
						name: 'Black Heart',
						image: '',
						by: 'Black Heart Institution',
						intro: 'Realize Syirian children',
						qty: '3'
					}
				],
				vuexToken: uni.getStorageSync('vuex_token'),
				content: '',
				fileUpload: [],
				//上传地址
				uploadUrl: process.uniEnv.appBaseUrl + '/api/app/common/upload/user_top_img',
				// 允许的图片后缀
				limitType: ['png', 'jpg', 'jpeg'],
				//上传图片列表
				fileList: [],
				starCount: null,
				goodsDetail: {
					name: 'Black Heart',
					image: '',
					by: 'Black Heart Institution',
					intro: 'Realize Syirian children',
					qty: '1'
				},
				placeholder: 'Evaluating babies from multiple perspectives can help more people who want to buy',
				uploadText: 'Sending pictures/videos can help others understand the product more truly',
				//输入框占位
				searchInput: {
					value: '',
					disabled: false,
					type: 'text',
					maxlength: 10,
					navPlaceholder: 'search'
				}
			};
		},
		onLoad(options) {
			this.lists = this.vuex_shoping_cartList.orderSkus;
			console.log(111,this.lists);
			this.lists.forEach((item) => {
				this.$set(item, 'details', {
					downIcon: 'thumb-down',
					upIcon: 'thumb-up',
					rate: null,
					content: '',
					images: [],
					"shopScore": {
						"shopId": item.shopId,
						"productScore": 0,
						"logisticsScore": 0,
						"afterSaleScore": 0,
						"consultScore": 0
					}
				});
			});
			// this.transformData()
			// console.log(111, this.lists);
		},
		methods: {
			uploadImg(index) {

				if (this.lists[index].details.images.length < 3) {
					this.$u.file.fileUpload('image', 9, true).then((res) => {
						console.log('res', res);
						res.forEach((i) => {
							this.lists[index].details.images.push(i.fileName);
						});

					});
					console.log(3333, index, this.lists[index].details.images);
				}
			},
			transformData() {
				this.lists.forEach((item) => {
					this.parmasData.push({
						orderId: item.id,
						content: item.details.content,
						images: item.details.images.join(','),
						rating: item.details.rate,
						parentId: 0,
						"shopScore": item.details.shopScore
					});
				});
			},
			//上传评价
			uploadEvaluate() {
				this.transformData();
				// console.log(999,this.parmasData);
				if (
					this.parmasData.every((item) => {
						return item.rating;
					})
				) {
					this.$u.post('/app/shopOrderComment/add', this.parmasData).then((res) => {
						this.showToast(this.$t('orderDetails.evaluated'));
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/order/myOrder',
								animationType: 'slide-in-right',
								animationDuration: 300
							});
						}, 1000);
					});
				} else {
					this.showToast(this.$t('orderDetails.evaluatError'), 'error');
				}
			},
			//点击好评、差评
			handleGoodRating(item) {
				console.log(this.parmasData);
				item.details.downIcon = 'thumb-down';
				item.details.upIcon = 'thumb-up-fill';
				item.details.rate = 1;
			},
			handleBadRating(item) {
				console.log(this.parmasData);
				item.details.upIcon = 'thumb-up';
				item.details.downIcon = 'thumb-down-fill';
				item.details.rate = 2;

			},

			//移除图片
			uploadRemove(index, lists, name) {
				let files = [];
				files = lists.filter((val) => {
					return val.progress == 100;
				});
				this.lists[name].details.images = [];
				files.forEach((item) => {
					this.lists[name].details.images.push(item.response.data.fileName);
				});
				console.log(1111, this.lists);
			},

			// 上传成功
			uploadSuccess(res, index, lists, ind) {
				if (res.code === 200) {
					this.lists[ind].details.images.push(res.data.fileName);
				}
				// console.log(222,this.lists);
			},
			showToast(tittle, type = 'success') {
				this.$refs.uToast.show({
					title: tittle,
					type: type
					// url: '/pages/user/index'
				});
			},
			submit() {
				console.log(this.parmasData);
				this.uploadEvaluate();
				// this.$refs.upload.forEach((item)=>{
				//  item.clear();
				// })

				this.inlitData();
			},
			// 重置上传的图片列表
			inlitData() {
				// console.log('重置成功');
				this.parmasData = [];
				// this.lists.forEach(item=>{
				// 	item.details={
				// 		downIcon: 'thumb-down',
				// 		upIcon: 'thumb-up',
				// 		rate: null,
				// 		content: '',
				// 		images:[]
				// 	}
				// })

				// this.$router.go(0); // 刷新当前页面
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.u-error-btn {
		background-color: #323755;
	}

	/deep/.uni-scroll-view,
	.uni-scroll-view-content {
		height: 92% !important;
	}

	.p-b-6 {
		padding-bottom: 60rpx;
		width: 100%;
		margin-top: 48rpx;
		display: inline-block;

	}

	.uploaddiv {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-radius: 20rpx;
		text-align: center;
		opacity: 1;
		min-height: 200rpx;
		border: 1px solid #e8e6ea;
	}

	.goodsInfo {
		position: relative;
		margin: 48rpx;

		/deep/.control {
			bottom: 20rpx !important;
		}
	}

	.lists {}

	.rate-box {
		.rate {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0;
			margin: 24px;
			font-size: 13px;

			view {
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					margin: 10rpx;
				}
			}
		}

		.content-box {
			padding: 0 40rpx;
			border-bottom: 4rpx solid #f2f3f5;

			&:nth-last-child(1) {
				border-bottom: 4rpx solid transparent;
			}

			.content {
				display: flex;
				align-items: start;

				.pen-box {
					margin-top: -2rpx;
				}
			}

			.uplod-box {
				width: 100%;
				margin: 0 auto;

				.slot-btn {
					width: 670rpx;
					height: 246rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
					border-radius: 20rpx;
					border: 1px solid #d2d2d2;

					.icon-box {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 100%rpx;
					}

					.uploadText {
						width: 78%;
						text-align: center;
						font-size: 26rpx;
						color: #616161;
					}
				}
			}

			.slot-btn__hover {
				background-color: rgb(235, 236, 238);
			}
		}
	}

	.release-btn {
		display: flex;
		flex-wrap: wrap;
		position: fixed;
		left: 0;
		bottom: 58rpx;
		right: 0;

		.custom-style {
			width: 670rpx;
			height: 120rpx;
			background: #2934d0;
			border-radius: 20rpx;
		}
	}

	textarea {
		width: 100%;
		height: 216rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
		font-weight: 350;
	}

	.uni-textarea-placeholder {
		color: #d2d2d2 !important;
	}

	.box-border {
		padding: 40rpx;
		border-radius: 26rpx;

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.rowTitle {
				color: rgba(23, 23, 23, 1);
				font-family: PingFang SC;
				font-weight: 500;
				margin-right: 8rpx;
				font-size: 28rpx;
				width: 150rpx;
			}

			.progress {
				width: 160rpx;
				height: 24rpx;
				border-radius: 32rpx;
				margin: 0 16rpx;
				background: rgba(230, 230, 230, 1);

				.progress-bar {
					height: 24rpx;
					border-radius: 32rpx;
					background: linear-gradient(90deg, rgba(198, 233, 77, 1) 0%, rgba(239, 218, 73, 1) 26.22%, rgba(240, 156, 58, 1) 57.06%, rgba(240, 156, 58, 1) 98.71%, rgba(235, 115, 48, 1) 98.71%);
				}
			}

			.rowRange {
				font-weight: 500;
				font-size: 28rpx;
				margin-right: 8rpx;
				color: rgba(253, 161, 22, 1);
			}

			.rowMes {
				color: rgba(253, 161, 22, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
			}
		}

		.range {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
		}

		.tips {
			color: rgba(182, 182, 182, 1);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 10px;
			padding: 0 0 40rpx;
			margin: 20rpx 0 40rpx;
			border-bottom: 1px solid rgba(182, 182, 182, 1);
		}

	}
</style>